'use client'

import { useRouter } from 'next/navigation'
import { usePathname } from 'next/navigation'
import { RiTelegramLine, RiMoreFill, RiDeleteBinLine } from '@remixicon/react'
import classNames from 'classnames'
import { useApp } from '@/app/context/app-context'

interface InstalledApp {
  key: string
  label: string
  icon: string
  href: string
}

// 所有可用的应用列表（用于匹配已安装的应用）
const llmModels = [
  {
    key: 'chatgpt',
    label: 'ChatGPT',
    icon: '🤖',
    href: '/explore/installed/1'
  },
  {
    key: 'claude',
    label: 'Claude',
    icon: '🧠',
    href: '/explore/installed/2'
  },
  {
    key: 'gemini',
    label: 'Gemini',
    icon: '💫',
    href: '/explore/installed/3'
  },
  {
    key: 'qianwen',
    label: '通义千问',
    icon: '🌐',
    href: '/explore/installed/4'
  },
  {
    key: 'baichuan',
    label: '百川',
    icon: '🌊',
    href: '/explore/installed/5'
  }
]

const agents = [
  {
    key: 'deepresearch',
    label: 'DeepResearch',
    icon: '🔍',
    href: '/explore/installed/6'
  },
  {
    key: 'writer',
    label: '写作助手',
    icon: '✍️',
    href: '/explore/installed/7'
  },
  {
    key: 'translator',
    label: '翻译专家',
    icon: '🌏',
    href: '/explore/installed/8'
  },
  {
    key: 'coder',
    label: '代码助手',
    icon: '💻',
    href: '/explore/installed/9'
  }
]

export default function ExploreSidebar() {
  const router = useRouter()
  const pathname = usePathname()
  const { installedApps, uninstallApp } = useApp()

  // 获取已安装的应用详情
  const installedAppDetails = [...llmModels, ...agents].filter(app => 
    installedApps.includes(app.key)
  )

  const navItems = [
    {
      key: 'discover',
      label: '发现',
      icon: <RiTelegramLine className="w-5 h-5 text-blue-500" />,
      href: '/explore/apps'
    }
  ]

  return (
    <div className="w-full h-full bg-gray-50/80 border-r border-gray-200 shadow-[1px_0_2px_rgba(0,0,0,0.05)]">
      <div className="p-4">
        {/* 发现部分 */}
        <div className="mb-6">
          {navItems.map((item) => (
            <div
              key={item.key}
              className={classNames(
                'flex items-center gap-2 px-3 py-2 rounded-lg cursor-pointer text-sm',
                {
                  'bg-blue-50 text-blue-600': pathname === item.href,
                  'hover:bg-gray-100': pathname !== item.href
                }
              )}
              onClick={() => router.push(item.href)}
            >
              {item.icon}
              <span>{item.label}</span>
            </div>
          ))}
        </div>

        {/* 工作区部分 */}
        <div>
          <div className="px-3 mb-2">
            <h3 className="text-xs text-gray-500 font-medium">工作区</h3>
          </div>
          <div>
            {installedAppDetails.map((app) => (
              <div
                key={app.key}
                className={classNames(
                  'flex items-center justify-between px-3 py-2 rounded-lg cursor-pointer text-sm group',
                  {
                    'bg-blue-50': pathname === app.href,
                    'hover:bg-gray-100': pathname !== app.href
                  }
                )}
              >
                <div 
                  className="flex items-center gap-2 flex-1"
                  onClick={() => router.push(app.href)}
                >
                  <span className="text-base">{app.icon}</span>
                  <span className={classNames({
                    'text-blue-600': pathname === app.href,
                    'text-gray-700': pathname !== app.href
                  })}>{app.label}</span>
                </div>
                <button 
                  className="opacity-0 group-hover:opacity-100 hover:bg-gray-200 p-1 rounded"
                  onClick={(e) => {
                    e.stopPropagation();
                    uninstallApp(app.key);
                  }}
                >
                  <RiDeleteBinLine className="w-4 h-4 text-red-500" />
                </button>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
} 